import React, { Component } from "react";

class Fenbut extends Component {
  render() {
    return <div id="zhedxan"></div>;
  }

  componentDidMount() {
    setTimeout(function () {
      var echarts = require("echarts");
      var chartDom = document.getElementById("zhedxan");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        legend: {
          top: 20,
        },
        tooltip: {
          trigger: "axis",
          showContent: false,
        },
        toolbox: {
          top: 15,
          right: 40,
          feature: {
            saveAsImage: {}, //下载
          },
        },
        grid: {
          top: 20,
          bottom: 20,
        },
        tooltip: {
          trigger: "axis", //提示
        },
        grid: {
          left: "4%",
          right: "4%",
          bottom: "8%",
          containLbel: true,
        },
        lineStyle: {
          width: 9,
          shadowOffsetX: 3, // 折线的X偏移
          shadowOffsetY: 3, // 折线的Y偏移
          shadowBlur: 8, // 折线模糊
          shadowColor: "rgba(145, 132, 132, 1)", //折线颜色
        },
        dataset: {
          source: [
            [
              "product",
              "2点",
              "4点",
              "6点",
              "8点",
              "10点",
              "12点",
              "14点",
              "16点",
              "18点",
              "20点",
              "22点",
              "24点",
            ],
            [
              "室内温度",

              70.1,
              53.4,
              85.1,
              51.1,
              11,
              82.1,
              88.7,
              51.4,
              55.1,
              53.3,
              73.8,
              68.7,
            ],
            [
              "室内湿度",
              51.1,
              51.4,
              55.1,
              53.3,
              73.8,
              68.7,
              51.1,
              51.4,
              55.1,
              53.3,
              73.8,
              68.7,
            ],
            [
              "室外温度",
              40.1,
              62.2,
              51.1,
              51.4,
              55.1,
              53.3,
              73.8,
              68.7,
              69.5,
              36.4,
              45.2,
              32.5,
            ],
            [
              "室外湿度",
              25.2,

              53.3,
              73.8,
              68.7,
              41.2,
              18,
              37.1,
              51.1,
              51.4,
              55.1,
              33.9,
              49.1,
            ],
          ],
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#ccc",
            },
          },
        },
        yAxis: { gridIndex: 0 },
        series: [
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
        ],
      };
      myChart.setOption(option);
    });
  }
}
export default Fenbut;
